import React, { useEffect } from 'react'
import { Modal, Form, Input } from 'antd'

function ScoreForm({ modalVisible, modalData, modalOk, modalCancel }) {
    const [form] = Form.useForm()
    useEffect(() => {
        // console.log(modalData)
        form.setFieldsValue(modalData)
        // console.log(classData)
    }, [form, modalData])
    return (
        <>
            <Modal
                getContainer={false}
                visible={modalVisible}
                title="成绩录入"
                okText="确定"
                cancelText="取消"
                onCancel={modalCancel}
                onOk={() => {
                    form.validateFields()
                        .then((values) => {
                            form.resetFields()
                            modalOk(values)
                        })
                        .catch((info) => {
                            console.log('Validate Failed:', info)
                        })
                }}
            >
                <Form
                    form={form}
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={{
                        modifier: 'public'
                    }}
                >
                    <Form.Item name="className" label="班级">
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="studentNo" label="学号">
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="studentName" label="姓名">
                        <Input disabled />
                    </Form.Item>
                    <Form.Item
                        name="chinese"
                        label="语文"
                        rules={[
                            {
                                required: true,
                                message: '请输入语文成绩'
                            }
                        ]}
                        style={{
                            display: 'inline-block',
                            width: '30%',
                            padding: '0 4.5%'
                        }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="math"
                        label="数学"
                        rules={[
                            {
                                required: true,
                                message: '请输入数学成绩'
                            }
                        ]}
                        style={{
                            display: 'inline-block',
                            width: '30%',
                            padding: '0 4.5%'
                        }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="eglish"
                        label="英语"
                        rules={[
                            {
                                required: true,
                                message: '请输入英语成绩'
                            }
                        ]}
                        style={{
                            display: 'inline-block',
                            width: '30%',
                            padding: '0 4.5%'
                        }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="physics"
                        label="物理"
                        rules={[
                            {
                                required: true,
                                message: '请输入物理成绩'
                            }
                        ]}
                        style={{
                            display: 'inline-block',
                            width: '30%',
                            padding: '0 4.5%'
                        }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="chemistry"
                        label="化学"
                        rules={[
                            {
                                required: true,
                                message: '请输入化学成绩'
                            }
                        ]}
                        style={{
                            display: 'inline-block',
                            width: '30%',
                            padding: '0 4.5%'
                        }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="biology"
                        label="生物"
                        rules={[
                            {
                                required: true,
                                message: '请输入生物成绩'
                            }
                        ]}
                        style={{
                            display: 'inline-block',
                            width: '30%',
                            padding: '0 4.5%'
                        }}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default ScoreForm
